<template>
  <div class="mb-2 flex flex-row-reverse justify-center md:justify-normal">
    <el-date-picker v-model="date" :clearable="false" :defaultDate="defaultDate" type="date" placeholder="选择日期"
     :disabled-date="disabledDate" @change="change" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import formatter from '@/common/formatter'
const emit = defineEmits(['change', 'allDates'])
let { allDates } = defineProps(['allDates'])
let _allDates = allDates ? allDates : window.allDates;

const defaultDate = new Date(formatter.excelDate(_allDates[_allDates.length - 1]))
const date = ref(defaultDate)
const min = new Date(formatter.excelDate(_allDates[0], 'YYYY/MM/DD')).getTime();
const max = new Date(formatter.excelDate(_allDates[_allDates.length - 1], 'YYYY/MM/DD')).getTime();
const disabledDate = (time) => {
  return time.getTime() < min || time.getTime() > max;
}
const change = (v) => {
  const days = +formatter.toExcelDate(v);
  emit('change', days)
}
</script>